import QtQuick 2.13
import QtQuick.Controls 2.5
import QtMultimedia 5.4


Page {

    property bool isAniPlayed: false
    signal backFromCookingGuide()


    SwipeView {
        id: sp
//        anchors.top: parent.top
//        anchors.bottom: parent.bottom
//        anchors.left: parent.left
//        anchors.right: sideMenu.left
        anchors.fill: parent
        orientation: Qt.Vertical

        CGIngredients {
            id: cgin
            Component.onCompleted: {
                playAni()
            }
        }

        Step1 {
            id: s1
        }


//        Rectangle {
//            Text {
//                text: qsTr("Step 2")
//                font.family: "GothamBold"
//                font.pixelSize: 88
//                anchors.centerIn: parent
//            }
//        }

//        Rectangle {
//            Text {
//                text: qsTr("Step 3")
//                font.family: "GothamBold"
//                font.pixelSize: 88
//                anchors.centerIn: parent
//            }
//        }

//        Rectangle {
//            Text {
//                text: qsTr("Step 4")
//                font.family: "GothamBold"
//                font.pixelSize: 88
//                anchors.centerIn: parent
//            }
//        }

        onCurrentIndexChanged: {
            if (currentIndex === 0) {
                sp.itemAt(0).playAni()
            }
            else {
                sp.itemAt(0).resetAni()
            }

            if (currentIndex !== 1) {
                sp.itemAt(1).doStop()
            }

            if (isAniPlayed) {
                setCurrentStep(currentIndex)
            }
        }

    }

    Rectangle {
        id: sideMenu
        width: 200
        height: 1080
        color: "black"
        opacity: 0.6
        anchors.right: parent.right
        anchors.rightMargin: -1
        anchors.top: parent.top
        border.color: Qt.rgba(0,0,0,0.6)
        border.width: 1

        Rectangle {
            id: back
            width: 200
            height: 193
            color: "transparent"


            Image {
                id: imgBack
                width: 48
                height: 48
                anchors.top: parent.top
                anchors.topMargin: 70
                anchors.horizontalCenter: parent.horizontalCenter
                source: "qrc:/imgs/back.png"
                Behavior on scale { PropertyAnimation{duration:200}}
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: imgBack.scale = 1.2
                onExited: imgBack.scale = 1.0
                onClicked: {
                    s1.doStop()
                    sp.currentIndex = 0
                    backFromCookingGuide()
                }
            }
        }

        Text {
            id: tguide
            height: 100
            opacity: 0
            color: "white"
            anchors.top: back.bottom
            anchors.topMargin: 0+50//75
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Cooking\n  Guide"
            font.pixelSize: 36
            font.family: "GothamBold"
        }

        Text {
            id: tIn
            height: 31
            color: "white"
            anchors.top: back.bottom
            anchors.topMargin: 102+100+50
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Ingredient"
            font.pixelSize: 32
            font.family: "GothamBook"
            Behavior on font.pixelSize { PropertyAnimation{duration:200;}}
            Behavior on opacity {enabled: isAniPlayed; PropertyAnimation{duration:200}}
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    setCurrentStep(0)
                    sp.setCurrentIndex(0)
                }
            }
        }

        Text {
            id: ts1
            opacity: 0.5
            height: 31
            color: "white"
            anchors.top: tIn.bottom
            anchors.topMargin: 47
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Step 1"
            font.pixelSize: 32
            font.family: "GothamBook"

            Behavior on font.pixelSize { PropertyAnimation{duration:200}}
            Behavior on opacity {enabled: isAniPlayed; PropertyAnimation{duration:200}}


            MouseArea {
                anchors.fill: parent
                onClicked: {
                    setCurrentStep(1)
                    sp.setCurrentIndex(1)
                }
            }
        }

        Text {
            id: ts2
            opacity: 0.5
            height: 31
            color: "white"
            anchors.top: ts1.bottom
            anchors.topMargin: 57
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Step 2"
            font.pixelSize: 32
            font.family: "GothamBook"
            Behavior on font.pixelSize { PropertyAnimation{duration:200}}
            Behavior on opacity {enabled: isAniPlayed; PropertyAnimation{duration:200}}

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    setCurrentStep(2)
                    sp.setCurrentIndex(2)
                }
            }
        }

        Text {
            id: ts3
            height: 31
            opacity: 0.5
            color: "white"
            anchors.top: ts2.bottom
            anchors.topMargin: 57
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Step 3"
            font.pixelSize: 32
            font.family: "GothamBook"
            Behavior on font.pixelSize { PropertyAnimation{duration:200}}
            Behavior on opacity {enabled: isAniPlayed; PropertyAnimation{duration:200}}

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    setCurrentStep(3)
                    sp.setCurrentIndex(3)
                }
            }
        }

        Text {
            id: ts4
            height: 31
            opacity: 0.5
            color: "white"
            anchors.top: ts3.bottom
            anchors.topMargin: 57
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Step 4"
            font.pixelSize: 32
            font.family: "GothamBook"
            Behavior on font.pixelSize { PropertyAnimation{duration:200}}
            Behavior on opacity {enabled: isAniPlayed; PropertyAnimation{duration:200}}

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    setCurrentStep(4)
                    sp.setCurrentIndex(4)
                }
            }
        }

    }



    function resetStepText() {
        var ss = [tIn, ts1, ts2, ts3, ts4]
        ss.forEach(i => {
                       i.opacity = 0.5
                       i.font.pixelSize = 32
                   })
    }

    function setCurrentStep(stepIndex) {
        resetStepText()
        var theI = null
        switch(stepIndex) {
        case 0:
            theI = tIn
            break;
        case 1:
            theI = ts1
            break;
        case 2:
            theI = ts2
            break;
        case 3:
            theI = ts3
            break;
        case 4:
            theI = ts4
            break;
        default:
            break;
        }
        theI.opacity = 1.0
        theI.font.pixelSize = 33
    }


    SequentialAnimation {
        id: sa
        ParallelAnimation {
            PropertyAnimation { target: tguide; property: "anchors.topMargin"; to: 0; duration: 600;}
            PropertyAnimation { target: tguide; property: "opacity"; to: 1;  duration: 600;}
            //        }

            //        ParallelAnimation {
            PropertyAnimation { targets: [ts1,ts2,ts3,ts4]; property: "opacity"; to:0.5; duration: 600}
            PropertyAnimation { target: tIn; property: "opacity"; to: 1; duration: 600;}
            PropertyAnimation { target: tIn; property: "anchors.topMargin"; to: 202; duration: 600;}
        }
    }

    function resetAni() {
        var ss = [tguide, tIn, ts1, ts2, ts3, ts4]
        ss.forEach(i => {
                       i.opacity = 0.0
                   })

        tguide.anchors.topMargin = 50
        tIn.anchors.topMargin = 202+50

        isAniPlayed = false
    }

    function playAni() {
        cgin.playAni()
        resetAni()
        sa.start()
        isAniPlayed = true
        sp.currentIndex = 0
    }




}



